<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="age+=100">vm:{{age}}</button>
    <child :age="age"></child>
</div>
</body>
<script>
    new Vue({
        el: "#root",
        data:{
            age:200
        },
        components:{
            Child:{
                data(){
                    return {
                        count:100,
                        username:"zhangsan"
                    }
                },
                props:["age"],
                template:(`
                    <button @click="fn">{{count}}|{{username}}|{{age}}</button>
                `),
                methods:{
                    fn(){
                        // this.count = 100;
                        this.count++;
                        setTimeout(()=>{
                            this.username+="!";
                        })

                    }
                },
                beforeUpdate(){
                    // 视图更新前
                    console.log("1-beforeUpdate",this.count,document.querySelector("button").innerText);
                },
                updated(){
                    // 视图更新完毕
                    console.log("2- updated",this.count,document.querySelector("button").innerText);
                },
                beforeCreate() {
                    console.log("beforeCreate");
                },
                created(){
                    console.log("created");
                },
                beforeMount(){
                    console.log("beforeMount");
                },
                mounted(){
                    console.log("mounted");
                }
            }

        }
    })
</script>
</html>